<script setup>
import { onMounted, reactive, computed } from 'vue'
import { queryCpuMonitorData, queryServerMonitorData } from '@/service/dashboard.js'

const monitorData = reactive({
  diskInfoList: [],
})

// 格式化字节数为易读单位
const formatStorage = computed(() => (bytes) => {
  if (!bytes) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let unitIndex = 0
  let size = bytes
  while (size >= 1024 && unitIndex < units.length - 1) {
    size /= 1024
    unitIndex++
  }
  return `${size.toFixed(2)} ${units[unitIndex]}`
})

// 计算系统运行时间（处理null情况）
const formatRuntime = computed(() => {
  if (monitorData.systemRunningTime && monitorData.systemRunningTime !== '0分钟') {
    return monitorData.systemRunningTime
  }
  return '刚刚启动'
})

onMounted(async () => {
  try {
    const res = await queryServerMonitorData()
    Object.assign(monitorData, res.data)
    console.log('监控数据:', monitorData)
  } catch (error) {
    console.error('获取监控数据失败:', error)
  }
  queryCpuMonitorData().then((res) => {
    monitorData.userCpuUsageRate = res.data.userCpuUsageRate
    monitorData.systemCpuUsageRate = res.data.systemCpuUsageRate
    monitorData.currentCpuIdleRate = res.data.currentCpuIdleRate
  })
})
</script>

<template>
  <div class="server-monitor">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>服务器监控仪表盘</h1>
      <div class="server-basic-info">
        <div class="server-name">
          <!-- 服务器图标 - SVG -->
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="2" y="2" width="20" height="8" rx="2" />
            <rect x="2" y="14" width="20" height="8" rx="2" />
            <line x1="6" y1="14" x2="6" y2="2" />
            <line x1="18" y1="14" x2="18" y2="2" />
            <line x1="2" y1="6" x2="22" y2="6" />
            <line x1="2" y1="18" x2="22" y2="18" />
          </svg>
          <span>{{ monitorData.serverName || '未知服务器' }}</span>
        </div>
        <div class="server-ip">
          <!-- 手机/IP图标 - SVG -->
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
            <line x1="12" y1="18" x2="12.01" y2="18" />
          </svg>
          <span>{{ monitorData.serverIp || '未知IP' }}</span>
        </div>
        <div class="server-time">
          <!-- 时钟图标 - SVG -->
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10" />
            <polyline points="12 6 12 12 16 14" />
          </svg>
          <span>{{ formatRuntime }}</span>
        </div>
      </div>
    </div>

    <!-- 系统概览卡片 -->
    <div class="overview-card card">
      <h2 class="card-title">系统概览</h2>
      <div class="overview-grid">
        <div class="overview-item">
          <!-- 操作系统图标 - SVG -->
          <svg class="item-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
            <line x1="8" y1="21" x2="16" y2="21" />
            <line x1="12" y1="17" x2="12" y2="21" />
          </svg>
          <div class="item-info">
            <div class="item-label">操作系统</div>
            <div class="item-value">{{ monitorData.operatingSystem || '未知' }}</div>
          </div>
        </div>
        <div class="overview-item">
          <!-- 架构/图层图标 - SVG -->
          <svg class="item-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="12 2 2 7 12 12 22 7 12 2" />
            <polyline points="2 17 12 22 22 17" />
            <polyline points="2 12 12 17 22 12" />
          </svg>
          <div class="item-info">
            <div class="item-label">架构</div>
            <div class="item-value">{{ monitorData.systemArchitecture || '未知' }}</div>
          </div>
        </div>
        <div class="overview-item">
          <!-- 检查图标 - SVG -->
          <svg class="item-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10" />
            <polyline points="16 8 10 14 8 12" />
          </svg>
          <div class="item-info">
            <div class="item-label">Java版本</div>
            <div class="item-value">{{ monitorData.javaVersion || '未知' }}</div>
          </div>
        </div>
        <div class="overview-item">
          <!-- 文件夹图标 - SVG -->
          <svg class="item-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M2 9l2 2h16l2-2" />
            <path d="M2 13h20v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-7z" />
          </svg>
          <div class="item-info">
            <div class="item-label">项目路径</div>
            <div class="item-value">{{ monitorData.projectPath || '未知' }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 核心监控指标 -->
    <div class="metrics-grid">
      <!-- CPU监控卡片 -->
      <div class="cpu-card card">
        <h2 class="card-title">CPU监控</h2>
        <div class="cpu-core">核心数: {{ monitorData.cpuCoreCount || 0 }}</div>
        <div class="usage-item">
          <div class="usage-label">用户使用率</div>
          <div class="usage-value">{{ monitorData.userCpuUsageRate || 0 }}%</div>
        </div>
        <div class="progress-container">
          <div class="progress-bar user-cpu" :style="{ width: `${monitorData.userCpuUsageRate || 0}%` }"></div>
        </div>

        <div class="usage-item">
          <div class="usage-label">系统使用率</div>
          <div class="usage-value">{{ monitorData.systemCpuUsageRate || 0 }}%</div>
        </div>
        <div class="progress-container">
          <div class="progress-bar system-cpu" :style="{ width: `${monitorData.systemCpuUsageRate || 0}%` }"></div>
        </div>

        <div class="usage-item">
          <div class="usage-label">空闲率</div>
          <div class="usage-value">{{ monitorData.currentCpuIdleRate || 0 }}%</div>
        </div>
        <div class="progress-container">
          <div class="progress-bar idle-cpu" :style="{ width: `${monitorData.currentCpuIdleRate || 0}%` }"></div>
        </div>
      </div>

      <!-- 内存监控卡片 -->
      <div class="memory-card card">
        <h2 class="card-title">内存监控</h2>
        <div class="usage-item">
          <div class="usage-label">总内存</div>
          <div class="usage-value">{{ monitorData.systemTotalMemory || '0 GB' }}</div>
        </div>
        <div class="usage-item">
          <div class="usage-label">已使用</div>
          <div class="usage-value">{{ monitorData.systemUsedMemory || '0 GB' }}</div>
        </div>
        <div class="usage-item">
          <div class="usage-label">剩余内存</div>
          <div class="usage-value">{{ monitorData.systemRemainingMemory || '0 GB' }}</div>
        </div>
        <div class="progress-container">
          <div
            class="progress-bar system-memory"
            :style="{ width: `${monitorData.systemMemoryUsageRate || 0}%` }"
          ></div>
        </div>
        <div class="usage-percent">使用率: {{ monitorData.systemMemoryUsageRate || 0 }}%</div>
      </div>

      <!-- JVM监控卡片 -->
      <div class="jvm-card card">
        <h2 class="card-title">JVM监控</h2>
        <div class="usage-item">
          <div class="usage-label">总内存</div>
          <div class="usage-value">{{ monitorData.jvmtotalMemory || '0 MB' }}</div>
        </div>
        <div class="usage-item">
          <div class="usage-label">已使用</div>
          <div class="usage-value">{{ monitorData.jvmusedMemory || '0 MB' }}</div>
        </div>
        <div class="usage-item">
          <div class="usage-label">剩余内存</div>
          <div class="usage-value">{{ monitorData.jvmremainingMemory || '0 MB' }}</div>
        </div>
        <div class="progress-container">
          <div class="progress-bar jvm-memory" :style="{ width: `${monitorData.jvmmemoryUsageRate || 0}%` }"></div>
        </div>
        <div class="usage-percent">使用率: {{ monitorData.jvmmemoryUsageRate || 0 }}%</div>
      </div>
    </div>

    <!-- 磁盘信息卡片 -->
    <div class="disk-card card">
      <h2 class="card-title">磁盘信息</h2>
      <div class="disk-list">
        <div v-for="(disk, index) in monitorData.diskInfoList" :key="index" class="disk-item">
          <div class="disk-header">
            <!-- 硬盘图标 - SVG -->
            <svg class="disk-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="10" />
              <line x1="2" y1="12" x2="22" y2="12" />
              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
            </svg>
            <div class="disk-name">{{ disk.sysTypeName || disk.dirName }}</div>
            <div class="disk-type">{{ disk.typeName }}</div>
          </div>
          <div class="disk-stats">
            <div class="disk-stat">
              <div class="stat-label">总容量</div>
              <div class="stat-value">{{ formatStorage(disk.total) }}</div>
            </div>
            <div class="disk-stat">
              <div class="stat-label">已使用</div>
              <div class="stat-value">{{ formatStorage(disk.used) }}</div>
            </div>
            <div class="disk-stat">
              <div class="stat-label">剩余</div>
              <div class="stat-value">{{ formatStorage(disk.free) }}</div>
            </div>
          </div>
          <div class="progress-container">
            <div class="progress-bar disk-usage" :style="{ width: `${(disk.usage * 100).toFixed(2)}%` }"></div>
          </div>
          <div class="disk-usage-percent">使用率: {{ (disk.usage * 100).toFixed(2) }}%</div>
        </div>
      </div>
    </div>

    <!-- 系统信息卡片 -->
    <div class="system-info-card card">
      <h2 class="card-title">系统详细信息</h2>
      <div class="info-grid">
        <div class="info-item">
          <div class="info-label">Java名称</div>
          <div class="info-value">{{ monitorData.javaName || '未知' }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">启动时间</div>
          <div class="info-value">{{ monitorData.startupTime || '未知' }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">安装路径</div>
          <div class="info-value">{{ monitorData.installationPath || '未知' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
$primary-color: #4f46e5;
$secondary-color: #10b981;
$warning-color: #f59e0b;
$danger-color: #ef4444;
$info-color: #3b82f6;
$light-gray: #f3f4f6;
$dark-gray: #374151;
$card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
$gradient-primary: linear-gradient(135deg, $primary-color 0%, #6366f1 100%);

.server-monitor {
  padding: 24px;
  background-color: #f9fafb;
  min-height: 100vh;

  .page-header {
    margin-bottom: 32px;

    h1 {
      font-size: 28px;
      font-weight: 600;
      color: $dark-gray;
      margin-bottom: 16px;
      display: flex;
      align-items: center;

      &::after {
        content: '';
        display: inline-block;
        width: 40px;
        height: 4px;
        background: $gradient-primary;
        margin-left: 16px;
        border-radius: 2px;
      }
    }

    .server-basic-info {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      padding: 16px;
      background: white;
      border-radius: 12px;
      box-shadow: $card-shadow;

      .server-name,
      .server-ip,
      .server-time {
        display: flex;
        align-items: center;
        gap: 8px;
        color: $dark-gray;

        .icon {
          width: 20px;
          height: 20px;
          color: $primary-color;
          stroke-width: 1.5; /* 调整SVG图标粗细 */
        }

        span {
          font-size: 15px;
          font-weight: 500;
        }
      }
    }
  }

  .card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: $card-shadow;
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }

    .card-title {
      font-size: 20px;
      font-weight: 600;
      color: $dark-gray;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 8px;

      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 20px;
        background: $gradient-primary;
        border-radius: 2px;
      }
    }
  }

  .overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;

    .overview-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      background: $light-gray;
      border-radius: 12px;
      transition: background 0.3s ease;

      &:hover {
        background: #e9ecef;
      }

      .item-icon {
        width: 28px;
        height: 28px;
        color: $primary-color;
        stroke-width: 1.5;
      }

      .item-info {
        .item-label {
          font-size: 13px;
          color: #6b7280;
          margin-bottom: 4px;
        }

        .item-value {
          font-size: 15px;
          font-weight: 500;
          color: $dark-gray;
        }
      }
    }
  }

  .metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
  }

  .cpu-card,
  .memory-card,
  .jvm-card {
    .usage-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .usage-label {
        font-size: 14px;
        color: $dark-gray;
        font-weight: 500;
      }

      .usage-value {
        font-size: 14px;
        color: $primary-color;
        font-weight: 600;
      }
    }

    .progress-container {
      height: 8px;
      background: $light-gray;
      border-radius: 4px;
      margin-bottom: 16px;
      overflow: hidden;

      .progress-bar {
        height: 100%;
        border-radius: 4px;
        transition: width 0.5s ease;
        background-size: 200% 100%;
        animation: progressAnimation 2s linear infinite;
      }
    }

    /* 进度条动画效果 */
    @keyframes progressAnimation {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -200% 0;
      }
    }

    .user-cpu {
      background: linear-gradient(90deg, $info-color 0%, rgba(59, 130, 246, 0.7) 50%, $info-color 100%);
    }

    .system-cpu {
      background: linear-gradient(90deg, $warning-color 0%, rgba(245, 158, 11, 0.7) 50%, $warning-color 100%);
    }

    .idle-cpu {
      background: linear-gradient(90deg, $secondary-color 0%, rgba(16, 185, 129, 0.7) 50%, $secondary-color 100%);
    }

    .system-memory {
      background: linear-gradient(90deg, $primary-color 0%, rgba(79, 70, 229, 0.7) 50%, $primary-color 100%);
    }

    .jvm-memory {
      background: linear-gradient(90deg, #8b5cf6 0%, rgba(139, 92, 246, 0.7) 50%, #8b5cf6 100%);
    }

    .cpu-core {
      font-size: 14px;
      color: $dark-gray;
      margin-bottom: 16px;
      font-weight: 500;
    }

    .usage-percent {
      text-align: right;
      font-size: 13px;
      color: #6b7280;
      margin-top: -8px;
    }
  }

  .disk-card {
    .disk-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 16px;
    }

    .disk-item {
      padding: 16px;
      background: $light-gray;
      border-radius: 12px;
      transition: transform 0.3s ease;

      &:hover {
        transform: translateY(-2px);
      }

      .disk-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .disk-icon {
          width: 20px;
          height: 20px;
          color: $primary-color;
          stroke-width: 1.5;
        }

        .disk-name {
          font-weight: 500;
          color: $dark-gray;
          font-size: 15px;
        }

        .disk-type {
          font-size: 13px;
          color: #6b7280;
          background: white;
          padding: 2px 8px;
          border-radius: 12px;
        }
      }

      .disk-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 12px;

        .disk-stat {
          text-align: center;

          .stat-label {
            font-size: 12px;
            color: #6b7280;
            margin-bottom: 4px;
          }

          .stat-value {
            font-size: 13px;
            font-weight: 500;
            color: $dark-gray;
          }
        }
      }

      .progress-container {
        height: 6px;
        margin-bottom: 8px;

        .disk-usage {
          background: linear-gradient(90deg, $primary-color 0%, #6366f1 100%);
        }
      }

      .disk-usage-percent {
        text-align: right;
        font-size: 13px;
        color: $dark-gray;
        font-weight: 500;
      }
    }
  }

  .system-info-card {
    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 16px;

      .info-item {
        padding: 12px 16px;
        background: $light-gray;
        border-radius: 12px;
        transition: background 0.3s ease;

        &:hover {
          background: #e9ecef;
        }

        .info-label {
          font-size: 13px;
          color: #6b7280;
          margin-bottom: 4px;
        }

        .info-value {
          font-size: 14px;
          color: $dark-gray;
          font-weight: 500;
          word-break: break-all;
        }
      }
    }
  }

  /* 响应式调整 */
  @media (max-width: 768px) {
    padding: 16px;

    .page-header {
      h1 {
        font-size: 24px;
      }

      .server-basic-info {
        gap: 16px;
        flex-direction: column;
        align-items: flex-start;
      }
    }

    .metrics-grid {
      grid-template-columns: 1fr;
    }

    .overview-grid {
      grid-template-columns: 1fr;
    }

    .disk-list {
      grid-template-columns: 1fr !important;
    }
  }
}
</style>
